<template>
	<view class="page">
		<view class="header-line">
			<view class="return-btn" @click="backPage"></view>
			<view class="text">
				新闻
			</view>
		</view>
		<view class="main-content">
			<view class="search-line">
				<view class="search-box">
					<view class="">
						<text>全部</text>
						<view class="search-item"></view>
					</view>
					<input type="text" maxlength="20" />
				</view>
				<view class="search-btn">搜索</view>
			</view>
			<view class="g-box-line"></view>
			<view class="hot-news-box">
				<view class="hot-news-header">
					<image :src="`${base_url}/static/img/huodong.png`" mode=""></image>
					<view class="hot-news-title">
						热门新闻
					</view>
					<view class="hot-news-more">
						<view>查看更多</view>
						<view class="arrow"></view>
					</view>
				</view>
				<view class="hot-news-list">
					<view class="news" v-for="item, index in newsList" :key="index">
						<view class="new-img">
							
						</view>
						<view class="new-info">
							
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { base_url } from '../../server/config';

export default {
	data() {
		return {
			base_url,
			newsList: [0, 0, 0, 0]
		}
	},
	methods: {
		backPage() {
			uni.navigateBack();
		}
	}
}
</script>

<style>
.search-box {
    display: flex;
    align-items: center;
}

.search-box > view {
    padding-left: 2vmin;
    padding-right: 5vmin;
    /* font-size: 3vmin; */
    border-right: 0.5vmin solid #000;
    position: relative;
}

.search-box > view text {
    font-size: 3vmin;
}

.search-box > view::after {
    content: "";
    display: block;
    width: 1vmin;
    height: 1vmin;
    border-right: 0.5vmin solid #000;
    border-bottom: 0.5vmin solid #000;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 40%;
    right: 2.3vmin;
}

.search-box input {
    flex: 1;
    height: 8vmin;
    outline: none;
    border: 0;
    margin: 0 1vmin;
    font-size: 3vmin;
}

/* margin-top */
.g-box-line {
    width: 100%;
    height: 25vmin;
	margin-top: 3vmin;
    background-color: rgb(242, 242, 242);
    border-radius: 3vmin;
    box-shadow: 0 1vmin 2vmin 0vmin rgba(0, 0, 0, 0.2);
}

.hot-news-header {
	margin-top: 5vmin;
	display: flex;
}

.hot-news-header image {
    width: 5vmin;
    height: 5vmin;
}

.hot-news-title {
	margin-left: 3vmin;
	font-size: 4vmin;
	flex: 1;
}

.hot-news-more {
	height: 100%;
	font-size: 4vmin;
	padding-right: 5vmin;
	display: flex;
	align-items: center;
}

.hot-news-more {
	height: 100%;
	font-size: 4vmin;
	padding-right: 5vmin;
	display: flex;
    position: relative;
}

.hot-news-more::after {
    width: 2vmin;
    height: 2vmin;
    content: "";
    display: block;
    border-top: 0.5vmin solid #666;
    border-right: 0.5vmin solid #666;
    position: absolute;
    top: 50%;
    right: 2vmin;
    transform: translateY(-50%) rotate(45deg);
}

.news {
	width: 100%;
	height: 23vmin;
	margin-top: 4vmin;
	display: flex;
	align-items: center;
	box-shadow: 0 0 2vmin 0 rgba(0, 0, 0, 0.1);
	border-radius: 3vmin;
}

.new-img {
	width: 30vmin;
	height: 85%;
	background-color: rgb(228, 228, 228);
	margin: 2vmin;
	border-radius: 3vmin;
}

.new-info {
	flex: 1;
	height: 100%;
	position: relative;
}

</style>
